<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基础-插槽-具名插槽？？？</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

    </style>
</head>
<body>
<div id="app">

    <!--&lt;!&ndash;一个不带 name 的 <slot> 出口会带有隐含的名字“default”。-->
    <page-component>
        <template v-slot:header>这是头</template>
        <p>main主体部分</p>
        <template  v-slot:footer>这是尾</template>
    </page-component>
</div>

<template id="page">
    <!--通过name 放在固定的位置、-->
    <div class="container">
        <header>
            <slot name="header"></slot>
        </header>

        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script>
    Vue.component("page-component",{
       template:"#page",// id="page"和他钩上
    });
    var app= new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })
</script>
</body>
</html>
